<template>
  <div class="table-box">
    <ProTable ref="proTable" title="角色列表" row-key="roleId" :indent="20" :columns="columns" :request-api="getTableList">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" :disabled="!BUTTONS['system:role:add']"> 新增角色 </el-button>
      </template>
      <!-- 菜单操作 -->
      <template #operation="{ row }">
        <el-tooltip effect="dark" content="编辑" placement="top">
          <el-button type="primary" link :icon="EditPen" :disabled="!BUTTONS['system:role:edit']"> </el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="删除" placement="top">
          <el-button type="primary" link :icon="Delete" :disabled="!BUTTONS['system:role:delete']"> </el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="权限分配" placement="top">
          <el-button
            type="primary"
            link
            :icon="CircleCheck"
            :disabled="!BUTTONS['system:role:permission']"
            @click="handleRolePermission(row)"
          >
          </el-button>
        </el-tooltip>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="ts" name="roleManage">
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { Delete, EditPen, CircleCheck, CirclePlus } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { getRoleList } from "@/api/modules/role";

// 权限按钮
const { BUTTONS } = useAuthButtons();

const proTable = ref();

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "roleId", label: "角色ID" },
  { prop: "roleName", label: "角色名称", search: { el: "input" } },
  { prop: "roleKey", label: "角色标识", search: { el: "input" } },
  { prop: "roleSort", label: "角色顺序" },
  { prop: "status", label: "是否停用" },
  {
    prop: "createTime",
    label: "创建时间",
    width: 250,
    search: {
      el: "date-picker",
      span: 1,
      props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" }
    }
  },
  { prop: "operation", label: "操作", width: 150, fixed: "right" }
];

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  return getRoleList(newParams);
};

const handleRolePermission = (row: any) => {
  console.log(row);
};
</script>
